<template>
  <div class="basicsContent">
    <div>
      <span style="margin-right:20px">{{$t('是否允许管理口进行业务面处理')}}</span>
      <el-switch :width="45" v-model="administration" class="administration switch" @change='protectAllChange($event, "administration")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('是')" :inactive-text="$t('否')"></el-switch>
    </div>
    <div>
      <span style="margin-right:20px">{{$t('是否开启自身扫描防护')}}</span>
      <el-switch :width="45" v-model="self" class="self switch" @change='protectAllChange($event, "self")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('是')" :inactive-text="$t('否')"></el-switch>
    </div>
    <div>
      <span style="margin-right:20px">{{$t('限制管理源地址')}}</span>
      <el-button type="primary" size="mini" @click="ipAddressChange" class="preservation">{{$t('保存')}}</el-button>
      <div style="width:600px;line-height: 20px;">
        <el-input v-emoji v-model="record.src" type="textarea" @keydown.native="handleKeyCode($event)" :autosize="{ minRows: 2, maxRows: 4 }" :placeholder="$t('为空时，所有地址都可正常管理')" ref="textarea"></el-input>
      </div>
    </div>
    <span class="basicsTips">{{$t('提示：注意限制管理源地址中是否包含本机IP')}}</span>
  </div>
</template>
<script>
import { changeManagementPort, changeAccessScan, limitSrcAddr } from '@/api/safe/access/protect'
import { texttextClass } from '@/utils/input-class.js'
export default {
  name: 'BasicsTools',
  props: ['dataList'],
  data () {
    return {
      administration: 'enable',
      self: 'enable',
      record: {
        src: ''
      }
    }
  },
  watch: {
    dataList: {
      handler (value) {
        this.record = value
        this.administration = this.record.forward
        this.self = this.record.scan_defense
      },
      immediate: true
    },
    'record.src': {
      handler (newVal) {
        this.record.src = newVal.replace(/[\r\n]/g, '')
      },
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      const textdata = ['textarea']
      texttextClass(this.$refs, textdata)
    })
  },
  methods: {
    protectAllChange (status, name) {
      if (name === 'administration') {
        this.dataList.forward = status
        changeManagementPort({ status: status })
      } else {
        this.dataList.scan_defense = status
        changeAccessScan({ status: status })
      }
    },
    ipAddressChange () {
      limitSrcAddr({ ip: this.record.src }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t(res.msg))
        }
      })
    },
    handleKeyCode (event) {
      if (event.keyCode === 13) {
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.basicsContent {
  line-height: 40px;
  font-size: 14px;

  .ivu-switch-checked {
    border-color: #5fb878;
    background-color: #5fb878;
  }
}

.basicsTips {
  font-size: 12px;
  color: red;
}
</style>
